<template>
  <div>
    <!-- 标题 -->
    <head-main :headimg="headimg" :btname="btname" :btrouter="btrouter" />
    <!-- 背景 -->
    <img src="@/images/csbg.png" class="login_over" />
    <!-- 任务栏task -->
    <div class="taskbox">
      <div
        class="task"
        v-for="item in task"
        :key="item.id"
        @click="step = item.id"
      >
        <img src="@/images/taskbg.png" alt="" />
        <span class="taskspan">{{ item.name }}</span>
        <img
          src="@/images/taskjx.png"
          alt=""
          class="taskzt"
          v-show="item.id == step"
        />
        <img
          src="@/images/taskover.png"
          alt=""
          class="taskzt"
          v-show="step > item.id"
        />
      </div>
    </div>
    <!-- 物品栏 -->
    <div v-show="step >= 2 && step != 6" class="wplbox">
      <img src="@/images/wpl.png" alt="" srcset="" />
      <div class="wpbox">
        <div
          class="wp"
          v-for="item in wp"
          :key="item.id"
          @click="xzwpfn(item.id)"
        >
          <img src="@/images/wpq.png" alt="" srcset="" class="wpimgs" />
          <div class="wpgl" v-if="item.id == steps || item.id == stepss"></div>
          <img
            :src="item.src"
            alt=""
            :class="item.id <= 4 ? 'wpimg' : 'wpimgsd'"
          />
          <span class="wpdes">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!-- 虚拟操作 -->
    <Seen
      :image="image"
      :images="images"
      @ertipsfn="ertipsfn"
      @tctipsfn="tctipsfn"
      @imagefn="imagefn"
      @imagesfn="imagesfn"
      @xybshowfn="xybshowfn"
      @cxshowfn="cxshowfn"
    />
    <!-- 提示 -->
    <!-- 提示 -->
    <div class="tsbox" v-if="ertips">
      <img src="@/images/tslogo.png" alt="" class="tsboximg" />
      <span> {{ ertips }} </span>
    </div>
    <!-- 弹窗提示框 -->
    <div class="tcbox" v-if="tctips">
      {{ tctips }}
      <div class="tool yzboxqd" @click="yzqr()">
        <img src="@/images/qd.png" alt="" class="active" />
        <img src="@/images/qdac.png" alt="" class="normal" />
      </div>
    </div>
    <div class="tcbox" v-if="cxshow">
      <img src="@/images/cxzp.png" alt="" />
    </div>
    <!-- 下一步 -->
    <div class="tool xybbox" @click="xybfn" v-show="xybshow">
      <img src="@/images/xyb.png" alt="" srcset="" class="active" />
      <img src="@/images/xybac.png" alt="" srcset="" class="normal" />
    </div>
  </div>
</template>
<script>
import Seen from '@/view/seen.vue'
import headMain from './headMain.vue'
export default {
  components: { headMain, Seen },
  name: 'WorkspaceJsonZsCb',
  data() {
    return {
      cxshow: false,
      xybshow: false,
      ertips: '',
      tctips: '',
      image: [],
      images: [],
      btname: '虚拟操作',
      btrouter: 'mK5',
      headimg: require('@/images/mk5bg.png'),
      step: 2, //大步骤
      steps: 0,
      stepss: 0,
      task: [
        {
          id: 1,
          name: '准备'
        },
        {
          id: 2,
          name: '准备采血笔'
        },
        {
          id: 3,
          name: '插入试纸'
        },
        {
          id: 4,
          name: '采血'
        },
        {
          id: 5,
          name: '吸血'
        },
        {
          id: 6,
          name: '记录与处理'
        }
      ],
      wp: [
        { id: 1, name: '血糖仪', src: require('@/images/xty.png') },
        { id: 2, name: '一次性使用采血试纸', src: require('@/images/cxz.png') },
        { id: 3, name: '采血笔', src: require('@/images/cxb.png') },
        {
          id: 4,
          name: '一次性使用采血针',
          src: require('@/images/cxzn.png')
        },
        { id: 5, name: '棉签', src: require('@/images/mq.png') },
        { id: 6, name: '酒精棉签', src: require('@/images/mq.png') }
      ]
    }
  },

  mounted() {},
  watch: {
    step: {
      handler(item, olditem) {
        this.image = []
        this.images = []
        this.steps = 0
        this.stepss = 0
        this.tctips = ''
        this.xybshow = false
        console.log(item, olditem)
        this.steps = item
        if (item == 2) {
          this.image = [
            {
              src: require('@/images/dcxb.png'),
              x: 370,
              y: 250,
              width: 249,
              height: 587
            }
          ]

          this.steps = 4
          this.ertips = '请点击物品栏中的一次性采血针'
        }
        if (item == 3) {
          this.steps = 2
          this.ertips = '请点击物品栏中一次性采血试纸'
          this.image = [
            {
              src: require('@/images/dxtyw.png'),
              x: 370,
              y: 250,
              width: 249,
              height: 587
            }
          ]
        }
        if (item == 4) {
          this.steps = 0
          this.stepss = 0
          //
          this.tctips =
            '采血的手指通常是是食指、中指、无名指这三个手指，为减轻疼痛，可取手指两侧采血，采血前由掌心向指尖推揉数次，或指尖下垂数分钟后采血，确保指尖血量充足。'
        }
        if (item == 5) {
          this.steps = 1
          this.stepss = 5
        }
      }
    },
    steps: {
      handler(item, olditem) {
        console.log(item, olditem)
      }
    }
  },
  methods: {
    xzwpfn(id) {
      if (id == this.steps) {
        this.steps = 0
      }
      if (id == 4) {
        this.ertips = '拖动采血针至采血笔处，安装采血针'
        this.images = [
          {
            src: require('@/images/dcxz.png'),
            x: 1000,
            y: 210,
            width: 249,
            height: 587
          }
        ]
      }
      if (id == 2) {
        this.ertips = '拖动试纸，将试纸插入血糖仪中'
        this.images = [
          {
            src: require('@/images/dcxsz.png'),
            x: 1000,
            y: 210,
            width: 249,
            height: 587
          }
        ]
      }
      if (id == 6) {
        this.images = [
          {
            src: require('@/images/dmq.png'),
            x: 1000,
            y: 210,
            width: 460,
            height: 184
          }
        ]
        this.ertips = '拖动酒精棉签，消毒中指'
      }
      if (id == 3) {
        this.steps = 0
        this.stepss = 0
        this.images = [
          {
            src: require('@/images/dcxb.png'),
            x: 1000,
            y: 210,
            width: 249,
            height: 587
          }
        ]
        this.ertips = '拖动采血笔至中指食指处进行采血'
      }
    },
    ertipsfn(i) {
      this.ertips = i
      console.log('提示更新了')
    },
    tctipsfn(i) {
      this.tctips = i
    },
    yzqr() {
      if (this.tctips == '采血针已安装完成') {
        this.step = 3
      }
      if (
        this.tctips ==
        '采血的手指通常是是食指、中指、无名指这三个手指，为减轻疼痛，可取手指两侧采血，采血前由掌心向指尖推揉数次，或指尖下垂数分钟后采血，确保指尖血量充足。'
      ) {
        this.ertips = '请点击物品栏中的酒精棉签'
        this.steps = 6
        this.tctips = ''
        this.image = [
          {
            src: require('@/images/dxdfx.png'),
            x: 600,
            y: 250,
            width: 249,
            height: 587
          }
        ]
      }
      if (this.tctips == '消毒采血部位共两次，待酒精自然晾干方可采血') {
        this.ertips = '请点击物品栏中的采血笔'
        this.stepss = 3
        this.tctips = ''
        this.image = [
          {
            src: require('@/images/ks.png'),
            x: 600,
            y: 250,
            width: 249,
            height: 587
          }
        ]
        this.images = []
      }
    },
    imagesfn(i) {
      this.images = i
    },
    imagefn(i) {
      this.image = i
    },
    xybfn() {
      if (this.image[0].src == require('@/images/dxty.png')) {
        this.step = 4
      }
      if (this.images[0].src == require('@/images/dcxb.png')) {
        this.step = 5
        this.cxshow = false
      }
    },
    xybshowfn(i) {
      this.xybshow = i
    },
    cxshowfn() {
      this.cxshow = true
    }
  }
}
</script>

<style></style>
